﻿<!doctype html>
<html lang="en">
<head>
    <title>XQ Wizard -基于JQuery的只能向导组件</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Include Bootstrap CSS -->
    <link href="../dist/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <!-- 导入css样式 -->
    <link href="../src/css/XQwizard.css" rel="stylesheet" type="text/css" />
    <link href="../src/css/XQwizard_theme_arrows.css" rel="stylesheet" type="text/css" />
    <link href="../src/css/XQwizard_theme_dots.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <!-- External toolbar sample -->
        <div class="row d-flex align-items-center p-3 my-3 text-white-50">
            <div class="col-12 col-lg-6 col-sm-12">
                <label>Theme:</label>
                <select id="theme_selector" class="custom-select col-lg-6 col-sm-12">
                    <option value="default">default</option>
                    <option value="arrows">arrows</option>
                    <option value="dots">dots</option>
                </select>
            </div>
            <div class="col-12 col-lg-6 col-sm-12">
                <label>扩展按钮:</label>
                <div class="btn-group col-lg-6 col-sm-12" role="group">
                    <button class="btn btn-secondary" id="prev-btn" type="button">上一步</button>
                    <button class="btn btn-secondary" id="next-btn" type="button">下一步</button>
                    <button class="btn btn-danger" id="reset-btn" type="button">重置</button>
                </div>
            </div>
        </div>
        <!-- xqWizard html -->
        <div id="xqWizard">
            <ul>
                <li><a href="#step-1">①数据表设置<br /><small>选择您要生成代码的数据库</small></a></li>
                <li><a href="#step-2">②表单页面<br /><small>设计您的页面板式</small></a></li>
                <li><a href="#step-3">③条件配置<br /><small>添加日期和多条件查询</small></a></li>
                <li><a href="#step-4">④信息配置<br /><small>代码数据路径和功能发布位置</small></a></li>
                <li><a href="#step-5">⑤查看代码<br /><small>代码生成预览</small></a></li>
                <li><a href="#step-6">⑥发布功能<br /><small>功能发布</small></a></li>
            </ul>
            <div>
                <div id="step-1" class="" style="height: 400px">
                </div>
                <div id="step-2" class="" style="height: 400px">
                </div>
                <div id="step-3" class="" style="height: 400px">
                </div>
                <div id="step-4" class="" style="height: 400px">

                </div>

                <div id="step-5" class="" style="height: 400px">

                </div>

                <div id="step-6" class="" style="height: 400px">

                </div>

            </div>

        </div>
        <!-- Include jQuery -->
        <script src="../dist/jquery/jquery-1.10.2.min.js" crossorigin="anonymous"></script>
        

        <script src="../dist/bootstrap/bootstrap.min.js"></script>
        <!-- Include xqWizard JavaScript source -->
        <script type="text/javascript" src="../src/js/jquery.XQWizard.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {


                $("#xqWizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {

                    if (stepPosition === 'first') {
                        $("#prev-btn").addClass('disabled');
                    } else if (stepPosition === 'final') {
                        $("#next-btn").addClass('disabled');
                    } else {
                        $("#prev-btn").removeClass('disabled');
                        $("#next-btn").removeClass('disabled');
                    }
                });

                // 扩展工具条按钮
                var btnFinish = $('<button></button>').text('完成')
                    .addClass('btn btn-info')
                    .on('click', function () { alert('Finish Clicked'); });
                var btnCancel = $('<button></button>').text('取消')
                    .addClass('btn btn-danger')
                    .on('click', function () { $('#xqWizard').xqWizard("reset"); });


                // 智能向导组件
                $('#xqWizard').xqWizard({
                    selected: 0,
                    theme: 'default',
                    transitionEffect: 'fade',
                    showStepURLhash: true,
                    toolbarSettings: {
                        toolbarPosition: 'both',
                        toolbarButtonPosition: 'end',
                        toolbarExtraButtons: [btnFinish, btnCancel]
                    }
                });


                // 扩展按钮事件
                $("#reset-btn").on("click", function () {
                    // 重置向导
                    $('#xqWizard').xqWizard("reset");
                    return true;
                });

                $("#prev-btn").on("click", function () {
                    // 导航 上一步
                    $('#xqWizard').xqWizard("prev");
                    return true;
                });

                $("#next-btn").on("click", function () {
                    // 导航 下一步
                    $('#xqWizard').xqWizard("next");
                    return true;
                });

                $("#theme_selector").on("change", function () {
                    // 改变 主题样式
                    $('#xqWizard').xqWizard("theme", $(this).val());
                    return true;
                });

                // 在页面刷新时设置选定的主题
                $("#theme_selector").change();
            });
        </script>
</body>
</html>
